{% autoescape off %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>配置管理系统</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" /> 
  <script src="/static/js/jquery.min.js"></script> 
  <script src="/static/js/bootstrap.min.js"></script> 
  <link rel="stylesheet" href="/static/css/datepicker/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/static/css/datepicker/css/default.css" type="text/css">
    <link rel="stylesheet" href="/static/css/datepicker/css/style.css" type="text/css">
    <script type="text/javascript" src="/static/css/datepicker/javascript/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/static/css/datepicker/javascript/zebra_datepicker.js"></script>
    <script type="text/javascript" src="/static/css/datepicker/javascript/core.js"></script>
</head>

<body>
   
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="row"> 
	    <div class="span10">
	    		<form action="/bi_problem/" method="get">
			            <input id="datepicker-example11" type="text" name="query" value=""/>
			            <input type="submit" value="按时间搜索">
			    </form>
	    	<div id="main" style="height:600px;width:950px"></div>
	    	
		</div> 
		<div class="span5" style="float:right;">
		
			<table class="table">
			   
			   <thead>
			      <tr>
			         <th colspan="3" style="text-align:center;">{{month_tag}}UAT安装测试问题月度环比</th>
			        
			      </tr>
			      <tr>
			         <th>项目群名称</th>
			         <th>AB类月度环比</th>
			         <th>CD类月度环比</th>
			      </tr>
			   </thead>
			   <tbody>
					{{out_str}}
			   </tbody>
			</table>
		</div> 
	</div> 
	<div id="insert_table">

	</div>	
	
    <!--div id="main" style="height:600px"></div-->
    <!-- ECharts单文件引入 -->
    <script src="/static/js/echarts.js"></script>
    <script type="text/javascript">
    var table_info = {{project_error_info}}
    
	
        // 路径配置
        require.config({
            paths: {
                echarts: '/static/js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用力导向布局图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
		
        
        var option = {
        
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['AB类', 'CD类']
    },
    toolbox: {
        show : true,
        feature : {
            
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    yAxis : [
        {
            type : 'value'
        }
    ],
    xAxis : [
        {
            type : 'category',
            axisLabel : {interval:0},
            data:[
				{% for sys_name in need_list %}
					'{{ sys_name }}',
				{% endfor %} 
				],            
        },
        {
            type : 'category',
            data:[
				{% for month in month_list %}
					'{{ month }}',
				{% endfor %} 
				],             
        }
    ],
    series : [
        {
            name:'AB类',
            type:'bar',
            stack: '{{ last_month }}',
            itemStyle : { 
                normal: {
                    label : {
                        show: true,
                        position: 'insideBottom'
                        }
                    }
                },
            data:[
				{% for num in last_num_ab %}
					{{ num }},
				{% endfor %} 
				],             
        },
        {
            name:'AB类',
            type:'bar',
            stack: '{{ now_month }}',
            itemStyle : {
                 normal: {
                     label : {
                         show: true, 
                         position: 'insideBottom'
                         
                         }
                     }
                 },
            data:[
				{% for num in curr_num_ab %}
					{{ num }},
				{% endfor %} 
				],              
        },
        {
            name:'CD类',
            type:'bar',
            stack: '{{ last_month }}',
            itemStyle : {
                normal: {
                    label : {
                        show: true,
                        position: 'insideBottom'
                        }
                    }
                },
            data:[
				{% for num in last_num_cd %}
					{{ num }},
				{% endfor %} 
				],                  
        },
        {
            name:'CD类',
            type:'bar',
            stack: '{{ now_month }}',
            itemStyle : {
                normal: {
                    label : {
                        show: true, 
                        position: 'insideBottom'
                        }
                    }
                },
            data:[
				{% for num in curr_num_cd %}
					{{ num }},
				{% endfor %} 
				],                  
        },
        
    ]
};

var ecConfig = require('echarts/config');
function eConsole(param) {
	var nodeName = param.name;
	$("#insert_table").html(table_info[nodeName])
}		



		
		
		
		myChart.setOption(option);
		myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
		//myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		//myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		//myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		//myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		
		}
		);
		
	
	
	
    </script>
    <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
		<a href="/upload_file/">| 文件上传</a> |
		<a href="/system_detail/">系统详情页</a> |
		<a href="/version_detail/">版本详情页</a> |
		<a href="/wiki_index/">系统百科页</a> |
		<a href="/dataex_detail/">交互信息展示页</a> |
		<a href="/cm_baseline/">基线展示页</a> |
		<a href="/cm_bi_index/">报表展示页</a> |
		<a href="/test_report_index/">测试周报页</a> |
	</div>
</body>
{% endautoescape %}